<template>
	<view>
	<view class="income-container">
		<view class="header">
			<text class="title">订单记录</text>
		</view>
		<view v-if="loading" class="loading">
			<text>加载中...</text>
		</view>
		<view v-else-if="error" class="error">
			<text>{{ error }}</text>
			<button class="retry-btn" @click="loadOrders">重试</button>
		</view>
		<view v-else-if="orders.length === 0" class="empty">
			<view class="empty-income-info">
				<text>暂无商家收入订单记录</text>
				<view class="empty-desc">
					<text>我是推荐达人，推荐商家入驻后，商家订单收入在此展示。</text>
					<text>每笔订单显示：我的提成收入、商家收入、收入比例等信息。</text>
				</view>
			</view>
		</view>
		<view v-else class="order-list">
			<view class="order-item" v-for="order in orders" :key="order.id">
				<view class="order-row">
					<text class="order-label">订单号：</text>
					<text class="order-value">{{ order.order_sn }}</text>
				</view>
				
				<view class="order-row">
					<text class="order-label">下单时间：</text>
					<text class="order-value">{{ formatTime(order.create_time, 'yyyy-MM-dd HH:mm:ss') }}</text>
				</view>
				<view class="order-row">
					<text class="order-label">订单金额：</text>
					<text class="order-value gold">¥{{ order.order_amount }}</text>
				</view>
				<view class="order-row">
					<text class="order-label">我的收入：</text>
					<text class="order-value gold">+¥{{ order.income }}</text>
					<text class="order-label" style="margin-left: 32rpx;">商家收入：</text>
					<text class="order-value">¥{{ order.shop_income || '0.00' }}</text>
				</view>
				<view class="order-row">
					<text class="order-label">状态：</text>
					<text class="order-status" :class="order.status === '已结算' ? 'settled' : 'pending'">
						{{ order.status }}
					</text>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders: [],
				loading: false,
				error: null,
				page: 1,
				pageSize: 10,
				total: 3,
				hasMore: false,
			}
		},
		onLoad() {
			this.loadOrders();
		},
		methods: {
			formatTime(time, format = 'yyyy-MM-dd HH:mm:ss') {
				return this.$u.timeFormat(time, format)
			},
			loadOrders() {
				this.loading = true;
				this.$u.api.recommend.getCommissionList().then(res => {
					this.orders = res.data;
					this.loading = false;
				}).catch(err => {
					this.error = err.message;
					this.loading = false;
				});
			}
		}
	}
</script>

<style>
.income-container {
	min-height: 100vh;
	background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
	padding: 30rpx;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.title {
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 30rpx;
}

.order-list {
	margin-top: 40rpx;
	display: flex;
	flex-direction: column;
	gap: 32rpx;
}

.order-item {
	background: linear-gradient(135deg, #23272f 0%, #181a20 100%);
	border-radius: 28rpx;
	padding: 36rpx 32rpx 32rpx 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.28), 0 2rpx 8rpx rgba(212, 175, 55, 0.08);
	margin-bottom: 0;
	display: flex;
	flex-direction: column;
	gap: 18rpx;
	transition: box-shadow 0.2s;
}

.order-item:hover {
	box-shadow: 0 12rpx 40rpx rgba(212, 175, 55, 0.18), 0 2rpx 8rpx rgba(212, 175, 55, 0.12);
}

.order-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-bottom: 0;
}

.order-label {
	font-size: 22rpx;
	color: #b0b0b0;
	letter-spacing: 1rpx;
}

.order-value {
	font-size: 26rpx;
	color: #f5f5f5;
	font-weight: 500;
}

.order-value.gold {
	color: #ffd700;
	font-size: 36rpx;
	font-weight: bold;
	letter-spacing: 1rpx;
	text-shadow: 0 2rpx 8rpx rgba(255, 215, 0, 0.12);
}

.order-income-row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 8rpx;
}

.order-income-label {
	font-size: 22rpx;
	color: #b0b0b0;
	margin-right: 12rpx;
}

.order-income-value {
	font-size: 40rpx;
	color: #ffd700;
	font-weight: 700;
	letter-spacing: 2rpx;
	line-height: 1.1;
	text-shadow: 0 4rpx 16rpx rgba(255, 215, 0, 0.18);
}

.order-status {
	font-size: 26rpx;
	font-weight: 600;
	color: #ffffff;
	padding: 4rpx 18rpx;
	border-radius: 16rpx;
	background: rgba(255,255,255,0.06);
	margin-left: 16rpx;
	transition: background 0.2s;
}

.order-status.settled {
	color: #00ff7f;
	background: rgba(0,255,127,0.08);
}

.order-status.pending {
	color: #ffd700;
	background: rgba(255,215,0,0.08);
}

@media (max-width: 500px) {
	.order-item {
		padding: 24rpx 16rpx 20rpx 16rpx;
		border-radius: 18rpx;
	}
	.order-value.gold,
	.order-income-value {
		font-size: 28rpx;
	}
	.order-status {
		font-size: 22rpx;
		padding: 2rpx 10rpx;
	}
}
.empty-income-info {
	text-align: center;
	padding: 30rpx;
	background: linear-gradient(135deg, #2a2a2a 0%, #1f1f1f 100%);
	border-radius: 20rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
}
.empty-desc {
	font-size: 24rpx;
	color: #cccccc;
}
.empty-desc text {
	display: block;
	margin-bottom: 10rpx;
}
.empty-desc text:last-child {
	margin-bottom: 0;
}
.empty-desc text:first-child {
	margin-bottom: 10rpx;
}

	
</style>
